<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>后台管理系统</title>
  <link rel="stylesheet" th:href="@{layui/css/layui.css}">
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      /* flex流式布局 */
      display: flex;
      /*flex-flow: column nowrap;*/
      justify-content: center;
      align-items: center;
      background-image: url(static/images/login_bg.jpg);
    }

    .login-page {
      width: 500px;
      background-color: #ffffff;
      border-radius: 10px;
      padding: 30px 20px;
    }

    .login-header {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }

    .layui-form-item {
      margin-bottom: 36px;
    }
  </style>
</head>
<body>
<div class="login-page">
  <form class="layui-form">
    <div class="layui-form-item">
      <div class="login-header">请&emsp;&emsp;登&emsp;&emsp;录</div>
    </div>
    <div class="layui-form-item">
      <input type="text" name="username" lay-verify="required" placeholder="用户名" class="layui-input">
    </div>
    <div class="layui-form-item">
      <input type="password" name="userpwd" lay-verify="required" placeholder="密码" class="layui-input">
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="submitBtn">登录</button>
    </div>
  </form>
</div>

<script type="text/javascript" th:src="@{layui/layui.js}"></script>
<script>
  layui.use(['form', 'layer'], function () {
    var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

    //提交登录
    form.on('submit(submitBtn)', function (data) {
      $.ajax('auth/login', {
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(data.field),
        success: function (res) {
          console.log(res)
          if (res.code === 200) {
            //如果前端页面采用纯静态页面，将后台响应回来的用户信息存储在前端缓存中
            // sessionStorage.setItem(key, value); 存
            // sessionStorage.getItem(key); 取
            // sessionStorage.removeItem(key); 删
            sessionStorage.setItem('userInfo', JSON.stringify(res.data));
            //页面跳转
            location.href = '/index';
          } else {
            layer.msg(res.message);
          }
        }
      });
      return false;
    });
  });
</script>
</body>
</html>